<template>
    <div class="panel">
        <el-collapse v-model="collapseIndex" :accordion="false">
            <el-collapse-item title="基础设置" :name="1">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="元素ID">
                        <el-input size="mini" :value="element.uid" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="元素类型">
                        <el-input size="mini" :value="element.type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="动画延迟">
                        <el-input size="mini" type="number" v-model="element['data-delay']"></el-input>
                    </el-form-item>
                    <el-form-item label="动画重复">
                        <el-radio-group v-model="element.styleObj.animationCount">
                            <el-radio label="1">单次</el-radio>
                            <el-radio label="infinite">无限循环</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="图片地址">
                        <el-input size="mini" v-model="element.img" clearable></el-input>
                        <input type="file" ref="fileInput" style="display: none" @change="handleFileSelect" accept="image/*">
                        <el-button size="mini" @click="triggerFileSelect">上传图片</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="排版设置" :name="2">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="宽度">
                        <el-input size="mini" type="number" v-model="element.styleObj.width"></el-input>
                    </el-form-item>
                    <el-form-item label="高度">
                        <el-input size="mini" type="number" v-model="element.styleObj.height"></el-input>
                    </el-form-item>
                    <el-form-item label="上边距">
                        <el-input size="mini" type="number" v-model="element.styleObj.top"></el-input>
                    </el-form-item>
                    <el-form-item label="左边距">
                        <el-input size="mini" type="number" v-model="element.styleObj.left"></el-input>
                    </el-form-item>
                    <el-form-item label="旋转角度">
                        <el-slider :min="0" :max="360" v-model="element.styleObj.angel"></el-slider>
                        <el-input-number 
                            size="mini" 
                            v-model="element.styleObj.angel" 
                            :min="0" 
                            :max="360" 
                            :step="1"
                            controls-position="right"
                            style="width: 100%">
                        </el-input-number>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="属性设置" :name="3">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="圆角">
                        <el-slider :min="0" :max="20" v-model="element.styleObj.radius"></el-slider>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
export default {
    name: 'w-image-ctrl',
    props: {
        element: Object
    },
    data() {
        return {
            collapseIndex: 1
        }
    },
    methods: {
        triggerFileSelect() {
            // 阻止事件冒泡，防止触发画布的选中事件
            event.stopPropagation();
            this.$refs.fileInput.click();
        },
        
        handleFileSelect(event) {
            // 阻止事件冒泡，防止触发画布的选中事件
            event.stopPropagation();
            const file = event.target.files[0];
            if (file) {
                // 检查文件大小
                if (file.size > 3 * 1024 * 1024) {
                    this.$message.error('图片大小不能超过3MB');
                    // 清空input的value，确保下次选择同一文件也能触发change事件
                    event.target.value = '';
                    return;
                }
                
                // 创建FormData对象
                const formData = new FormData();
                formData.append('file', file);
                
                // 显示上传状态
                const loading = this.$loading({
                    lock: true,
                    text: '图片上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                
                // 上传到服务器
                this.$http.post('/php/upload-image.php', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(response => {
                    loading.close();
                    if (response.data.success) {
                        // 更新元素的图片URL
                        this.element.img = response.data.url;
                        this.$message.success('图片上传成功');
                    } else {
                        this.$message.error(response.data.message || '图片上传失败');
                    }
                }).catch(error => {
                    loading.close();
                    this.$message.error('图片上传失败: ' + (error.response?.data?.message || error.message));
                });
            }
            // 清空input的value，确保下次选择同一文件也能触发change事件
            event.target.value = '';
        }
    }
}
</script>